<template>
    <div>
      <nav class="navTitle">
        <div class="back" onclick="goBack()"></div>
        赠送房卡
        <div class="bavTitleRigth" onclick="goRouter('./leaderIndex.html')">首页</div>
      </nav>
      <nav-top title="赠送房卡" :show="true"></nav-top>
      <div class="mainRoomCard">
        <dl>
          <dt>房卡余额:<span class="nowMoney">0</span> </dt>
          <dd>
            <div class="mainItem clearfix">
              <label class="fl">用户ID</label>
              <input type="number" class="fl userId" placeholder="请输入用户ID">
              <button class="fr searchBtn">查询</button>
            </div>
            <div class="searchInfo">
              <img src="../assets/img/photo.png" alt="">
              <span>不愿意透露姓名的市民刘鑫源</span>
            </div>
            <div class="tips">

            </div>
          </dd>
          <dd>
            <div class="mainItem clearfix">
              <label class="fl">赠卡数</label>
              <input class="fl giveCardNum" type="text" placeholder="请输入赠卡数">
            </div>
          </dd>
        </dl>
        <div class="btn clearfix">
          <button class="fl reset">重置</button>
          <button class="fr sure btnDis" disabled="disabled" @click="sureGiveCard">确认</button>
        </div>
      </div>
    </div>
</template>

<script>
  import NavTop from '../components/navTop.vue'
  import reqData from '../ajax/ajax'
  export default {
    components: {NavTop},
    name: '',
    data () {
      return {}
    },
    mounted: function () {},
    computed: {},
    filters: {},
    methods: {
      sureGiveCard () {
        reqData(this.Url + '/room/leader/change/detail', 'get', {
          pageNum: 1,
          pageSize: 20,
          startTime: '',
          endTime: ''
        }, function (data) {
          if (data.status === 0) {
            this.show = false
            this.datalist = data.data
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  //赠送房卡的样式
  .mainRoomCard{
    border-bottom:0.02rem solid #e8e8e8;
    padding-top:0.44rem;
    background-color: #ffffff;
    dl{
      border-top:0.02rem solid #e8e8e8;
      padding:0 0.22rem;
      dt{
        height:1.36rem;
        line-height:1.36rem;
        color: #FFA385;
        font-size:0.4rem;
        text-align: center;
      }
      dd{
        border-top:0.02rem solid #e8e8e8;
        padding:0.3rem 0;
      }
      .mainItem{
        line-height:0.6rem;
        label{
          padding-right:0.1rem;
          font-size:0.3rem;
        }
        input{
          width:4.2rem;
          height: 0.6rem;
          padding-left:0.1rem;
          border:none;
          background-color: #F2F2F4;
          box-shadow: inset 0 0px 0.03rem 0.03rem #E8E8E8;
          font-size:0.3rem;
          outline: none;
        }
        input:-ms-input-placeholder{text-align: center;}
        input::-webkit-input-placeholder{text-align: center;}
        input::-moz-placeholder { text-align: center; }

        button{
          border:none;
          outline: none;
          width:1.52rem;
          height:0.6rem;
          background-color: #00B01E;
          border-radius: 0.1rem;
          color: #fff;
        }
      }
      .searchInfo{
        padding-top:0.3rem;
        text-align: center;
        display: none;
        img{
          width:1.5rem;
          height: 1.5rem;
          vertical-align: middle;
        }
        span{
          color: #aaaaaa;
        }
      }
      .tips{
        padding:0.1rem 0 0 1rem;
        font-size:0.3rem;
        color:orangered;
        display: none;
      }
    }
    .btn{
      padding: 0.3rem 0.45rem;
      border-top:0.02rem solid #e8e8e8;
      button{
        height:0.6rem;
        width:3rem;
        color: #fff;
        -webkit-border-radius: 0.08rem;
        -moz-border-radius: 0.08rem;
        border-radius: 0.08rem;
        outline: none;
        border:none;

      }
      .reset{
        background-color: #00B0ED ;
      }
      .sure{
        background-color: #00B01E ;
      }
    }
  }
</style>
